<template>
<div class="shop" ref="shopTarget">
    <div class="title">
        <h2>热门商品</h2>
    </div>
    <div
      class="demo"
      style="margin: 0 auto"
      v-masonry
      gutter="15"
      percent-position="true"
      fit-width="true"
        ref="waterfallTarget"  
    >
        <div
            v-masonry-tile
            class="card"
            v-for="item in goodsData"
            :key="item.id"
        >
            <router-link :to="{name:'goods',query:{id:item.id}}">
                <div>
                <img :src="item.s_goods_photos[0].path" alt="" />
                <div class="goodsMsg">
                    <div class="goodsName">
                        <p>{{ item.name }}</p>
                    </div>
                    <div class="goodsDesc">{{ item.desc }}</div>
                    <div class="price">
                    <p>
                        <strong>￥</strong> {{ item.price }}
                        <span>库存:{{ item.stock_num }}</span>
                    </p>
                    </div>
                </div>
            </div>
            </router-link>
        </div>
    </div>
</div>
</template>

<script setup>
import { ref,defineProps,defineEmits,onUpdated,nextTick } from 'vue';
import { throttle } from '@/utils';
let waterfallTarget=ref(null)
let shopTarget=ref(null)
const emits=defineEmits(['go'])
defineProps({
    goodsData:Array,
})

onUpdated(()=>{
    setTimeout(()=>{
        nextTick(()=>{
            let a=waterfallTarget.value.style.height.slice(0,-2);
            shopTarget.value.style.height=Number(a)+100+'px'
        })
    },1000)
})



document.addEventListener('scroll',throttle(function(){
    const {scrollHeight,scrollTop,clientHeight}=document.documentElement
    if ((scrollHeight-scrollTop)-2<=clientHeight) {
        emits('go')//将事件go派发至父组件中更新
    }
},500))
</script>

<style lang="scss" scoped>
    @import "../../../style/base.scss";
    .shop {
  width: 100%;
  height: 2rem;
  background-color: #fff;
  .title {
    margin-top: 0.16rem;
    display: inline-block;
  }
}

.shop {
  .title {
    margin: 0.14rem 0 0.14rem 0.18rem;
    h2 {
      font-size: 0.18rem;
      color: #333;
    }
  }
  .card {
    width: 43vw;
    background-color: #fff;
    padding: 0.04rem;
    img {
      width: 100%;
      display: block;
      height: auto;
    }
    .goodsMsg {
      .goodsName {
        margin: 0.1rem 0;
        p {
          font-size: 0.14rem;
          color: #333;
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      .goodsDesc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 0.04rem;
        color: #666;
      }
      .price {
        p {
          font-size: 0.2rem;
          color: #ff4142;
          margin: 0.03rem 0;
          span {
            font-size: 0.06rem;
            color: #999;
            margin-left: 0.3rem;
            display: inline-block;
          }
          strong {
            font-size: 0.14rem;
            margin-left: 0.04rem;
          }
        }
      }
    }
  }
}
</style>